<div class="article-body">
		
			<div class="article-intro" id="content">
			
			<h1>JavaScript <span class="color_h1">语法</span>
</h1>
<hr>
<p class="intro">JavaScript 是一个程序语言。语法规则定义了语言结构。</p>

<hr>
<h2>JavaScript 语法</h2>
<p>JavaScript 是一个脚本语言。</p>
<p>它是一个轻量级，但功能强大的编程语言。</p>


<hr>
<h2>JavaScript 字面量</h2>
<p>在编程语言中，一般固定值称为字面量，如 3.14。</p>
<p><strong>数字（Number）字面量</strong> 可以是整数或者是小数，或者是科学计数(e)。</p>
<div class="example">
<div class="example_code">
3.14<br><br>
1001<br><br>
123e5
<button class="copy-code-button" type="button" data-clipboard-text="3.14
1001
123e5"></button></div>
<br><a target="_blank" class="tryitbtn" href="/try/try.php?filename=tryjs_syntax_numbers" rel="noopener noreferrer">尝试一下 »</a>
</div>
<p><strong>字符串（String）字面量</strong> 可以使用单引号或双引号:</p>

<div class="example">
<div class="example_code">
"John Doe"<br><br>
'John Doe'
<button class="copy-code-button" type="button" data-clipboard-text="&quot;John Doe&quot;
'John Doe'"></button></div>
<br><a target="_blank" class="tryitbtn" href="/try/try.php?filename=tryjs_syntax_strings" rel="noopener noreferrer">尝试一下 »</a>
</div>
<p><strong>表达式字面量</strong> 用于计算：</p>

<div class="example">
<div class="example_code">
5 + 6<br><br>
5 * 10
<button class="copy-code-button" type="button" data-clipboard-text="5 + 6
5 * 10"></button></div>
<br><a target="_blank" class="tryitbtn" href="/try/try.php?filename=tryjs_syntax_expressions" rel="noopener noreferrer">尝试一下 »</a>
</div>
<p><strong>数组（Array）字面量</strong> 定义一个数组：</p>

<div class="example">
<div class="example_code">
[40, 100, 1, 5, 25, 10]
<button class="copy-code-button" type="button" data-clipboard-text="[40, 100, 1, 5, 25, 10]"></button></div>
</div>
<p><strong>对象（Object）字面量</strong> 定义一个对象：</p>

<div class="example">
<div class="example_code">
{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}
<button class="copy-code-button" type="button" data-clipboard-text="{firstName:&quot;John&quot;, lastName:&quot;Doe&quot;, age:50, eyeColor:&quot;blue&quot;}"></button></div>
</div>
<p><strong>函数（Function）字面量</strong> 定义一个函数：</p>

<div class="example">
<div class="example_code">
function myFunction(a, b) { return a * b;}
<button class="copy-code-button" type="button" data-clipboard-text="function myFunction(a, b) { return a * b;}"></button></div>
</div>
<br><hr>
<h2>JavaScript 变量</h2>
<p>在编程语言中，变量用于存储数据值。</p>
<p>JavaScript 使用关键字 <strong>var</strong> 来定义变量， 使用等号来为变量赋值：</p>
<div class="example">
<div class="example_code">
var x, length<br><br>x = 5<br><br>
length = 6
<button class="copy-code-button" type="button" data-clipboard-text="var x, lengthx = 5
length = 6"></button></div>
<br><a target="_blank" class="tryitbtn" href="/try/try.php?filename=tryjs_syntax_variables" rel="noopener noreferrer">尝试一下 »</a>
</div>
<p>变量可以通过变量名访问。在指令式语言中，变量通常是可变的。字面量是一个恒定的值。 </p>
<p>
</p>
<table class="lamp"><tbody><tr>
<th style="width:34px"><img decoding="async" src="/images/lamp.jpg" alt="Note" style="height:32px;width:32px"></th>
<td>变量是一个<strong>名称</strong>。字面量是一个<strong>值</strong>。</td>
</tr></tbody></table>
<hr>
<h2>JavaScript 操作符</h2>
<p>JavaScript使用 <strong>算术运算符</strong> 来计算值: </p>
<div class="example">
<div class="example_code">
(5 + 6) * 10<br>
<button class="copy-code-button" type="button" data-clipboard-text="(5 + 6) * 10"></button></div>
<br><a target="_blank" class="tryitbtn" href="/try/try.php?filename=tryjs_syntax_operators" rel="noopener noreferrer">尝试一下 »</a>
</div>

<p>JavaScript使用<strong>赋值运算符</strong>给变量赋值： </p>
<div class="example">
<div class="example_code">
x = 5<br>
y = 6<br>
z = (x + y) * 10
<button class="copy-code-button" type="button" data-clipboard-text="x = 5
y = 6
z = (x + y) * 10"></button></div>
<br><a target="_blank" class="tryitbtn" href="/try/try.php?filename=tryjs_syntax_assign" rel="noopener noreferrer">尝试一下 »</a>
</div>

<p>JavaScript语言有多种类型的运算符：</p>
<table class="reference">
<tbody><tr>
<th>类型</th>
		<th>实例</th>
		<th>描述</th>
	</tr>
<tr>
<td>赋值，算术和位运算符</td>
		<td>=&nbsp; +&nbsp; -&nbsp; *&nbsp; /</td>
		<td>在 JS 运算符中描述</td>
	</tr>
<tr>
<td>条件，比较及逻辑运算符</td>
		<td>==&nbsp; != &lt;&nbsp; &gt;&nbsp; </td>
		<td>在 JS 比较运算符中描述</td>
	</tr>
</tbody></table>
<br><hr>
<h2>JavaScript 语句</h2>
<p>在 HTML 中，JavaScript 语句用于向浏览器发出命令。</p>
<p>语句是用分号分隔：</p>
<div class="example">
<div class="example_code">
x = 5 + 6;<br>
y = x * 10;<button class="copy-code-button" type="button" data-clipboard-text="x = 5 + 6;
y = x * 10;"></button></div>
</div>
<br><hr>
<h2>JavaScript 关键字</h2><p>JavaScript 关键字用于标识要执行的操作。</p><p></p><p>
和其他任何编程语言一样，JavaScript 保留了一些关键字为自己所用。
</p>

<strong>var</strong> 关键字告诉浏览器创建一个新的变量：<p></p>
<div class="example">
<div class="example_code">
var x = 5 + 6;<br>var y = x * 10;
<button class="copy-code-button" type="button" data-clipboard-text="var x = 5 + 6;var y = x * 10;"></button></div>
</div>

<p>
JavaScript 同样保留了一些关键字，这些关键字在当前的语言版本中并没有使用，但在以后 JavaScript 扩展中会用到。
</p><p>

以下是 JavaScript 中最&ZeroWidthSpace;&ZeroWidthSpace;重要的保留关键字（按字母顺序）：</p>
<table class="reference">
<tbody><tr>
<td>abstract</td>
<td>else</td>
<td>instanceof</td>
<td>super</td>
</tr><tr>
</tr><tr>
<td>boolean</td>
<td>enum</td>
<td>int</td>
<td>switch</td>
</tr><tr>
</tr><tr>
<td>break</td>
<td>export</td>
<td>interface</td>
<td>synchronized</td>
</tr><tr>
</tr><tr>
<td>byte</td>
<td>extends</td>
<td>let</td>
<td>this</td>
</tr><tr>
</tr><tr>
<td>case</td>
<td>false</td>
<td>long</td>
<td>throw</td>
</tr><tr>
</tr><tr>
<td>catch</td>
<td>final</td>
<td>native</td>
<td>throws</td>
</tr><tr>
</tr><tr>
<td>char</td>
<td>finally</td>
<td>new</td>
<td>transient</td>
</tr><tr>
</tr><tr>
<td>class</td>
<td>float</td>
<td>null</td>
<td>true</td>
</tr><tr>
</tr><tr>
<td>const</td>
<td>for</td>
<td>package</td>
<td>try</td>
</tr><tr>
</tr><tr>
<td>continue</td>
<td>function</td>
<td>private</td>
<td>typeof</td>
</tr><tr>
</tr><tr>
<td>debugger</td>
<td>goto</td>
<td>protected</td>
<td>var</td>
</tr><tr>
</tr><tr>
<td>default</td>
<td>if</td>
<td>public</td>
<td>void</td>
</tr><tr>
</tr><tr>
<td>delete</td>
<td>implements</td>
<td>return</td>
<td>volatile</td>
</tr><tr>
</tr><tr>
<td>do</td>
<td>import</td>
<td>short</td>
<td>while</td>
</tr><tr>
</tr><tr>
<td>double</td>
<td>in</td>
<td>static</td>
<td>with</td>
</tr><tr>
</tr></tbody></table>
<hr>
<h2>JavaScript 注释</h2>
<p>不是所有的 JavaScript 语句都是"命令"。双斜杠
<strong>//</strong> 后的内容将会被浏览器忽略：</p>
<div class="example">
<div class="example_code">
// 我不会执行<button class="copy-code-button" type="button" data-clipboard-text="// 我不会执行"></button></div>
</div>

<hr>
<h2>JavaScript 数据类型</h2>
<p>JavaScript 有多种数据类型：数字，字符串，数组，对象等等：</p>
<div class="example">
<div class="example_code">
var length = 16;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;// Number 通过数字字面量赋值 <br>
var points = x * 10;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // Number 通过表达式字面量赋值<br>
var lastName = "Johnson";&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // String 通过字符串字面量赋值<br>
var cars = ["Saab", "Volvo", "BMW"];&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // Array&nbsp; 通过数组字面量赋值<br>
var person = {firstName:"John", lastName:"Doe"};&nbsp;&nbsp;// Object 通过对象字面量赋值
<button class="copy-code-button" type="button" data-clipboard-text="var length = 16;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;// Number 通过数字字面量赋值 
var points = x * 10;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // Number 通过表达式字面量赋值
var lastName = &quot;Johnson&quot;;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // String 通过字符串字面量赋值
var cars = [&quot;Saab&quot;, &quot;Volvo&quot;, &quot;BMW&quot;];&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // Array&nbsp; 通过数组字面量赋值
var person = {firstName:&quot;John&quot;, lastName:&quot;Doe&quot;};&nbsp;&nbsp;// Object 通过对象字面量赋值"></button></div>
</div>
<br><hr>
<h2>数据类型的概念</h2>
<p>编程语言中，数据类型是一个非常重要的内容。</p>
<p>为了可以操作变量，了解数据类型的概念非常重要。</p>
<p>如果没有使用数据类型，以下实例将无法执行：</p>
<div class="example">
<div class="example_code">
16 + "Volvo"<button class="copy-code-button" type="button" data-clipboard-text="16 + &quot;Volvo&quot;"></button></div>
</div>
<p>16 加上 "Volvo"  是如何计算呢? 以上会产生一个错误还是输出以下结果呢？</p>
<div class="example">
<div class="example_code">
"16Volvo"<button class="copy-code-button" type="button" data-clipboard-text="&quot;16Volvo&quot;"></button></div>
</div>
<p>你可以在浏览器尝试执行以上代码查看效果。</p>
<p>
在接下来的章节中你将学到更多关于数据类型的知识。</p>

<hr>
<h2>JavaScript 函数</h2>
<p>
JavaScript 语句可以写在函数内，函数可以重复引用：</p>
<p>
<strong>引用一个函数</strong> = 调用函数(执行函数内的语句)。</p>
<div class="example">
<div class="example_code">
function myFunction(a, b) {<br>
&nbsp;&nbsp;&nbsp;	return a * b;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
// 返回 a 乘以 b 的结果<br>
}
<button class="copy-code-button" type="button" data-clipboard-text="function myFunction(a, b) {
&nbsp;&nbsp;&nbsp;	return a * b;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
// 返回 a 乘以 b 的结果
}"></button></div>
</div>
<br><hr>

<h2>JavaScript 字母大小写</h2>
<p>JavaScript 对大小写是敏感的。</p>

<p>当编写 JavaScript 语句时，请留意是否关闭大小写切换键。</p>

<p>函数 <strong>getElementById</strong> 与 <strong>getElementbyID</strong> 是不同的。</p>

<p>同样，变量 <strong>myVariable</strong> 与 <strong>MyVariable</strong> 也是不同的。</p>

<hr>
<h2>JavaScript 字符集</h2>
<p>JavaScript 使用 Unicode 字符集。</p>
<p>Unicode 覆盖了所有的字符，包含标点等字符。</p>
<p>如需进一步了解，请学习我们的 <a href="/charsets/ref-html-utf8.html">完整 Unicode 参考手册</a>。</p>
<hr>
<h2>您知道吗?</h2>
<table class="lamp"><tbody><tr>
<th style="width:34px">
<img decoding="async" src="/images/lamp.jpg" alt="Note" style="height:32px;width:32px"><br>
</th>
<td>JavaScript 中，常见的是驼峰法的命名规则，如 lastName (而不是lastname)。</td>
</tr></tbody></table>			<!-- 其他扩展 -->
						
			</div>
			
		</div>